<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.common.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/js/jquery-2.2.3.min.js" charset="utf-8"></script>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md6">
        <div id="main" style="height: 600px;width: 100%" ></div>
    </div>
    <div class="layui-col-md6">
        <img src="/img/jieshao.jpeg" style="height: 300px;width:100%;margin-top: 100px">     </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md6">
        <div id="main2" style="height: 600px;width:100%"></div>
    </div>
    <div class="layui-col-md6">
        <div >
            <img src="/img/jieshao.jpeg" style="height: 300px;width:100%;margin-top: 100px">     </div>
        </div>
    </div>
</div>



<script type="text/javascript" th:inline="none">

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['联通', '电信', '移动']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'value'
            }
        ],
        yAxis: [
            {
                type: 'category',
                axisTick: {
                    show: false
                },
                data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018']
            }
        ],
        series: [
            {
                name: '联通',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
                emphasis: {
                    focus: 'series'
                },
                data: [200, 170, 240, 244, 200, 220, 210]
            },
            {
                name: '电信',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 341, 374, 390, 450, 420]
            },
            {
                name: '移动',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'left'
                },
                emphasis: {
                    focus: 'series'
                },
                data: [-120, -132, -101, -134, -190, -230, -210]
            }
        ]
    };
    myChart.setOption(option);











    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option2;





    let base = +new Date(1988, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let data = [[base, Math.random() * 300]];
    for (let i = 1; i < 20000; i++) {
        let now = new Date((base += oneDay));
        data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
    }
    option2 = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: 'center',
            text: '用户增长'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'time',
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 20
            },
            {
                start: 0,
                end: 20
            }
        ],
        series: [
            {
                name: '增长人数',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {},
                data: data
            }
        ]
    };
    myChart.setOption(option2);
</script>
</body>
</html>